<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Building Component</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"
        }
      }
    </script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        background: #f5f5f5;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .building {
        position: relative;
        min-width: 300px;
        max-width: 500px;
        height: 44px;
        border: none;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        background: linear-gradient(
          90deg,
          #ffc590 2.48%,
          #fd82d6 25.22%,
          #b89cf8 68.77%,
          #66c0ff 95.38%
        );
        white-space: nowrap;
      }

      .building::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        z-index: -1;
        margin: -1px;
        border-radius: 7px;
      }

      .building__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 16px;
        background: #fff;
        border: 1px solid transparent;
        border-radius: inherit;
        background-clip: padding-box;
      }

      .left {
        display: flex;
        align-items: center;
        gap: 4px;
        user-select: none;
        color: #333;
        font-size: 14px;
      }

      .stop-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: none;
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
        color: #666;
        transition: all 0.2s;
      }

      .stop-btn:hover {
        background: #f0f0f0;
        color: #333;
      }

      .stop-btn:active {
        transform: scale(0.95);
      }

      /* 加载动画 */
      .loading-icon {
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      /* SVG 图标样式 */
      .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
      }

      .icon-small {
        width: 16px;
        height: 16px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="building">
        <div class="building__content">
          <div class="left">
            <!-- 加载图标 -->
            <svg
              class="icon loading-icon"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path
                d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
                opacity=".25"
              />
              <path
                d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
              />
            </svg>
            {{ text }}
          </div>
          <button class="stop-btn" @click="handleStop" type="button">
            <!-- 停止图标 -->
            <svg
              class="icon icon-small"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <rect x="6" y="6" width="12" height="12" rx="2" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <script type="module">
      import { createApp, ref } from "vue";

      createApp({
        setup() {
          const text = ref("正在生成中...");

          const handleStop = () => {
            console.log("停止按钮被点击");
            // 这里可以添加停止逻辑
            text.value = "已停止";

            // 模拟停止后的状态变化
            setTimeout(() => {
              text.value = "正在生成中...";
            }, 2000);
          };

          return {
            text,
            handleStop,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
